<!DOCTYPE html>
<html lang="en">

<head>
    {include file="common/meta" /}
    <style type="text/css">
        html,
        body {
            height: 100% !important;
            width: 100%;
            min-width: 600px;
            background: url('/assets/img/bg.png') no-repeat;
            background-size: 100% 100%;
        }
        input:-webkit-autofill,
        input:-webkit-autofill:hover,
        input:-webkit-autofill:focus {
            box-shadow: 0 0 0 60px #fff inset;
            -webkit-text-fill-color: #32B3EA;
            outline: none;
            border-radius: 5px;
         }
         .input-group .form-control:last-child,
        .input-group-addon:last-child,
        .input-group-btn:last-child>.btn,
        .input-group-btn:last-child>.btn-group>.btn,
        .input-group-btn:last-child>.dropdown-toggle,
        .input-group-btn:first-child>.btn:not(:first-child),
        .input-group-btn:first-child>.btn-group:not(:first-child)>.btn {
            border-bottom-left-radius: 5px;
            border-top-left-radius: 5px;

}
        input::-webkit-input-placeholder,
        textarea::-webkit-input-placeholder {
            /* WebKit browsers */
            color: rgba(255, 255, 255, 0.5) !important;
        }

        input:-moz-placeholder,
        textarea:-moz-placeholder {
            /* Mozilla Firefox 4 to 18 */
            color: rgba(255, 255, 255, 0.5) !important;
        }

        input::-moz-placeholder,
        textarea::-moz-placeholder {
            /* Mozilla Firefox 19+ */
            color: rgba(255, 255, 255, 0.5) !important;
        }

        input:-ms-input-placeholder,
        textarea:-ms-input-placeholder {
            /* Internet Explorer 10+ */
            color: rgba(255, 255, 255, 0.5) !important;
        }

        .login-screen {
            max-width: 400px;
            padding: 0;
        }

        .login-screen .copyright {
            text-align: center;
        }

        @media(max-width:767px) {
            .login-screen {
                padding: 0 20px;
            }
        }

        #login-form {
            margin-top: 83px;
        }

        #login-form .input-group {
            margin-bottom: 15px;
        }

        .container {
            position: absolute;
            left: 0;
            right: 0;
            margin: auto;
            top: 0;
            bottom: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
        }

        .well {
            border: none;
            /* background: linear-gradient(230deg, rgba(53, 57, 74, 0) 0%, rgb(0, 0, 0) 100%); */
            width: 380px;
            height: 400px;
            background: none;
            margin: 0;
            padding: 0;
        }

        .login-form {
            height: 100%;
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .input-group .input-group-addon {
            background: rgba(57, 61, 82, 0);
            border: none;
            color: rgba(255, 255, 255, 0.5);
        }

        .input-group .form-control {
            background: rgba(57, 61, 82, 0) !important;
            border: none;
            font-size: 14px;
            color: rgba(255, 255, 255, 0.5);
        }

        .inline {
            float: right;
            font-size: 12px;
            color: rgba(255, 255, 255, 1);
            display: inline-block;
            position: relative;
        }

        .btn-block {
            display: inline-block;
            background: none;
            border-radius: 2px;
            border: 1px solid rgba(255, 255, 255, 1);
            width: 380px;
            height: 40px;
            color: rgba(255, 255, 255, 1);
            margin-top: 56px;
        }

        .input-group.tp {
            border-bottom: 1px solid rgba(255, 255, 255, 0.5);
            padding-bottom: 5px;
        }

        input[type="checkbox"] {
            -webkit-appearance: none;
            height: 12px;
            width: 12px;
            border-radius: 6px;
            vertical-align: middle;
            background: #ffffff;
            margin: 0 5px;
        }

        input[type="checkbox"]:checked {
            background: url('/assets/img/checkbox.png') no-repeat center top;
            background-size: 100% 100%;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="login-wrapper">
            <div class="login-screen">
                <div class="well">
                    <div class="login-form">
                        <!-- <img id="profile-img" class="profile-img-card" src="__CDN__/assets/img/avatar.png" /> -->
                        <img style="width: 322px;height:35px;" src="__CDN__/assets/img/login-logo.png" />
                        <p id="profile-name" class="profile-name-card"></p>
                        <form action="" method="post" id="login-form">
                            <div id="errtips" class="hide"></div>
                            {:token()}
                            <div class="input-group tp">
                                <div class="input-group-addon">
                                    <span class="glyphicon glyphicon-user" aria-hidden="true"></span>
                                </div>
                                <input type="text" class="form-control" id="pd-form-username" placeholder="{:__('请输入用户名称')}" name="username" autocomplete="off"
                                    value="" data-rule="{:__('Username')}:required;username" />
                            </div>

                            <div class="input-group tp">
                                <div class="input-group-addon">
                                    <span class="glyphicon glyphicon-lock" aria-hidden="true"></span>
                                </div>
                                <input type="password" class="form-control" id="pd-form-password" placeholder="{:__('请输入用户密码')}" name="password" autocomplete="off"
                                    value="" data-rule="{:__('Password')}:required;password" />
                            </div>
                            {if $config.fastadmin.login_captcha}
                            <div class="input-group">
                                <div class="input-group-addon">
                                    <span class="glyphicon glyphicon-option-horizontal" aria-hidden="true"></span>
                                </div>
                                <input type="text" name="captcha" class="form-control" placeholder="{:__('Captcha')}" data-rule="{:__('Captcha')}:required;length(4)"
                                />
                                <span class="input-group-addon" style="padding:0;border:none;cursor:pointer;">
                                    <img src="{:rtrim('__PUBLIC__', '/')}/captcha" width="100" height="30" onclick="this.src = '{:rtrim('__PUBLIC__', '/')}/captcha?r=' + Math.random();"
                                    />
                                </span>
                            </div>
                            {/if}
                            <!-- <div class="form-group">
                                <spanl class="inline" for="keeplogin">
                                    <input type="checkbox" name="keeplogin" id="keeplogin" value="1" /> {:__('记住密码')}
                                    </label>
                            </div> -->
                            <div class="form-group btn1">
                                <button type="submit" class="btn-lg btn-block">{:__('Sign in')}</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {include file="common/script" /}
    <script src="__CDN__/assets/js/jquery-2.1.1.min.js"></script>
    <script src="__CDN__/assets/js/jquery.ripples.js"></script>
    <script>
        $('#pd-form-username').focus(function () {
            $(this).css({
                'color': 'rgba(255,255,255,1)'
            })
            $(this).prev().css({
                'color': 'rgba(255,255,255,1)'
            })
            $(this).parent().css({
                'border-bottom': '1px solid rgba(255,255,255,1)'
            })
        });
        $('#pd-form-password').focus(function () {
            $(this).css({
                'color': 'rgba(255,255,255,1)'
            })
            $(this).prev().css({
                'color': 'rgba(255,255,255,1)'
            })
            $(this).parent().css({
                'border-bottom': '1px solid rgba(255,255,255,1)'
            })
        });
        $('#pd-form-username,#pd-form-password').blur(function () {
            $(this).css({
                'color': 'rgba(255,255,255,0.5)'
            })
            $(this).prev().css({
                'color': 'rgba(255,255,255,0.5)'
            })
            $(this).parent().css({
                'border-bottom': '1px solid rgba(255,255,255,0.5)'
            })
        });
        $(document).ready(function () {
            $('body').ripples({
                resolution: 512,
                dropRadius: 20,
                perturbance: 0.04
            });
        });
    </script>
</body>

</html>